<template>
    <div>
        <van-cell-group>
            <van-field v-model="tel" label="请输入手机号" placeholder="请输入手机号" :error-message="flag"></van-field>
        </van-cell-group>

        <van-button type="danger" @click="nextClick" :disabled="flag == 'ok' ? false : true">下一步</van-button>
        
    </div>
</template>
 
<script setup lang="ts">

import { ref, computed } from 'vue';
import { checkTel } from '@/api/user'

import { showDialog } from 'vant'; // 弹出框 显示提示信息

import { useUserStore } from '@/store/useStore'
import { useRouter } from 'vue-router';

const tel = ref('')
const user = useUserStore()
const router = useRouter()


// 验证规则
const pattern = /^\d{11}$/   // 数字11位

// 1. 点击  如果没有手机号，或者验证不通过  不让点击
const flag = computed(() => {
    if (!tel.value) {
        return '手机号不能为空'
    }
    if (!pattern.test(tel.value)) {
        return '手机号格式不对'
    }
    return 'ok'
})
// 三元判断 isDisabled
// const isDisabled = flag.value=='ok'?false:true

// 2. 点击下一步 发送请求  成功 =》 弹出成功提示，提示当前手机号 ;   并判断是否注册，如果注册了就去登录页面； 没有注册，则进行下一步注册（把手机号存到本地）

const nextClick = async() => {
    let res = await checkTel({ tel: tel.value })
    console.log(res, 3333333);  // 可以得到一些信息

    if (res.code == '200') {
        showDialog({ message: tel.value + res.message })

        // 3. 存储 输入的手机号 =》 在pinia里面通过方法存储
        user.setTel(tel.value)

        // 4. 成功后，路由跳转，到下一步
        router.push('/register/code')

    }else if(res.code=='10005'){  // 已经注册，跳到login
        showDialog({ message:tel.value + res.message })
        router.push('/login')

    }
}













</script>
 
<style scoped lang="scss">
.van-button {
    background-color: red;
    width: 100%;
}
</style>

 <!-- 步骤
    1. 输入框的验证  包装输入框有值，并且符合规则
    2. 点击下一步，就发送请求； 判断是否注册
    3. 如果注册了，去登录页面； 没有注册，则进行下一步注册，存到本地
-->